<template>
  <a-row style="padding: 10px;">
    <a-col span="24" style="margin: 10px 0">
      <a-button type="primary" @click="addOpRole">新增管理员</a-button>
    </a-col>
    <a-col span="24">
      <a-table :dataSource="data" :columns="columns" :pagination="pagination" :loading="loading" size="small" bordered
               :rowKey="record => record.opRoleId">
        <template slot="operation" slot-scope="text, record, index">
          <div>
            <span>
              <a @click="() => powerMenu(record)">授权菜单</a>
              <a @click="() => powerAdmin(record)">授权管理员</a>
              <a @click="() => updateOpRole(record)">修改</a>
              <a @click="() => delOpRole(record)">删除</a>
            </span>
          </div>
        </template>
      </a-table>
      <NCPagination :page="pageObj" @changePage="(page)=>{this.pageObj = page}" @searchList="searchList"/>
    </a-col>
    <!-- 添加修改角色   -->
    <a-modal v-model="modal.visible" :title="modal.title">
      <a-form :form="modal.form">
        <a-form-item label="运营角色名称" :label-col="modal.labelCol" :wrapper-col="modal.wrapperCol">
          <a-input placeholder="请输入运营角色名称！"
                   v-decorator="['roleName', {rules: [{ required: true, message: '请输入运营角色名称！'}]}]"/>
        </a-form-item>
        <a-form-item label="排序" :label-col="modal.labelCol" :wrapper-col="modal.wrapperCol">
          <a-input placeholder="请输入排序！"
                   v-decorator="['num', {rules: [{ required: true, message: '请输入排序！'}]}]"/>
        </a-form-item>
      </a-form>
      <template slot="footer">
        <a-button key="submit" type="primary" :loading="modal.loading" @click="addOrUpdateOpRoleOk">确定</a-button>
        <a-button key="back" @click="modal.visible = false">取消</a-button>
      </template>
    </a-modal>

    <!-- 绑定应用角色菜单   -->
    <a-modal v-model="modal.bindMenu.visible" title="绑定应用角色菜单" width="50%">
      <NCTree :tree-all-data="modal.bindMenu.allMenuTree"
              :tree-select-data="modal.bindMenu.exMenuList"
              @onCheck="(selectData) => {modal.bindMenu.exMenuList = selectData}"/>
      <template slot="footer">
        <a-button key="submit" type="primary" :loading="modal.bindMenu.loading" @click="bindRoleMenuOk">
          确定
        </a-button>
        <a-button key="back" @click="() => {modal.bindMenu.visible = false}">取消</a-button>
      </template>
    </a-modal>

    <!-- 授权成员信息 -->
    <a-modal v-model="modalAdmin.visible" title="授权管理员信息" width="1200px">
      <a-row style="min-height: 320px;">
        <a-col span="24">
          <div>授权信息 总人数{{modalAdmin.allPageObj.total}} 授权{{modalAdmin.selectAdminList.length}}人</div>
          <a-table :dataSource="modalAdmin.allAdminList" :columns="modalAdmin.columns" :pagination="pagination"
                   size="small" bordered :rowKey="record => record.adminId">
            <template slot="operation" slot-scope="text, record, index">
              <span>
                <a @click="() => bindAdminOk(record)" v-if="!record.power">授权</a>
                <a @click="() => unBindAdminOk(record)" v-if="record.power">解除授权</a>
              </span>
            </template>
          </a-table>
          <NCPagination :page="modalAdmin.allPageObj" @changePage="(page)=>{this.modalAdmin.allPageObj = page}"
                        @searchList="selectPowerAdmin"/>
        </a-col>
      </a-row>
      <template slot="footer">
        <a-button key="back" @click="modalAdmin.visible = false">取消</a-button>
      </template>
    </a-modal>
  </a-row>
</template>

<script>
  import NCPagination from '../../components/NCPagination'
  import NCTree from '../../components/NCTree'

  export default {
    name: 'OpRole',
    components: {
      NCPagination,
      NCTree
    },
    data () {
      return {
        pageObj: {total: 10, pageSize: 10, pageNum: 1},
        loading: false,
        pagination: false,
        data: [],
        columns: [
          {
            title: '序号',
            width: '20',
            customRender: (text, record, index) => {
              return index + this.pageObj.pageSize * (this.pageObj.pageNum - 1) + 1
            }
          },
          {title: '角色名称', dataIndex: 'roleName', sorter: true},
          {title: '排序序号', dataIndex: 'num', sorter: true},
          {
            title: '状态',
            dataIndex: 'state',
            sorter: true,
            customRender: (text, record, index) => {
              return text === 2 ? '锁定' : '正常'
            }
          },
          {title: '操作', fixed: 'right', width: 300, scopedSlots: {customRender: 'operation'}}
        ],
        modal: {
          labelCol: {span: 7},
          wrapperCol: {span: 12},
          visible: false,
          selectData: {},
          form: this.$form.createForm(this),
          bindMenu: {
            visible: false,
            loading: false,
            allMenuTree: [],
            exMenuList: []
          }
        },
        modalAdmin: {
          labelCol: {span: 7},
          wrapperCol: {span: 12},
          allPageObj: {total: 10, pageSize: 10, pageNum: 1},
          visible: false,
          columns: [
            {
              title: '序号',
              width: '20',
              customRender: (text, record, index) => {
                return index + this.pageObj.pageSize * (this.pageObj.pageNum - 1) + 1
              }
            },
            {title: '管理员名称', dataIndex: 'account'},
            {title: '管理员电话', dataIndex: 'phone'},
            {title: '创建时间', dataIndex: 'createTime'},
            {
              title: '状态',
              dataIndex: 'state',
              customRender: (text, record, index) => {
                return text === 2 ? '锁定' : '正常'
              }
            },
            {
              title: '操作',
              fixed: 'right',
              width: 200,
              scopedSlots: {customRender: 'operation'}
            }
          ],
          selectAdminList: [],
          allAdminList: [],
          rowSelection: {
            selectedRowKeys: [],
            onChange: (selectedRowKeys, selectedRows) => {
              this.modalAdmin.rowSelection.selectedRowKeys = selectedRowKeys
            }
          }
        }
      }
    },
    mounted () {
      this.searchList()
    },
    methods: {
      searchList () {
        this.loading = true
        this.http.post('upmsApi', '/admin/opRole/getOpRoleList', {
          pageNum: this.pageObj.pageNum,
          pageSize: this.pageObj.pageSize,
          data: {}
        }).then((res) => {
          if (res.success) {
            this.data = res.rows
            this.pageObj.total = res.total
          }
          this.loading = false
        })
      },
      addOpRole () {
        this.modal.title = '添加角色'
        this.modal.visible = true
        this.selectData = {}
        this.modal.form.resetFields()
      },
      updateOpRole (record) {
        this.modal.title = '修改角色'
        this.modal.visible = true
        this.modal.selectData = record
        setTimeout(() => {
          this.modal.form.setFieldsValue({
            roleName: record.roleName,
            num: record.num
          })
        }, 100)
      },
      addOrUpdateOpRoleOk () {
        this.modal.form.validateFields((err, values) => {
          if (!err) {
            let url = this.modal.title === '添加角色' ? '/admin/opRole/addOpRole' : '/admin/opRole/updateOpRole'
            this.http.post('upmsApi', url, {
              opRoleId: this.modal.selectData.opRoleId,
              ...values
            }).then((res) => {
              if (res.success) {
                this.$message.info(res.message)
                this.searchList()
                this.modal.visible = false
              }
            })
          }
        })
      },
      delOpRole (record) {
        const that = this
        this.$confirm({
          title: '删除运营角色！',
          onOk () {
            return new Promise((resolve, reject) => {
              that.http.post('upmsApi', '/admin/opRole/delOpRole', {
                opRoleId: record.opRoleId
              }).then((res) => {
                if (res.success) {
                  that.$message.info(res.message)
                  that.searchList()
                  resolve(res.message)
                } else {
                  reject(res.message)
                }
              })
            })
          }
        })
      },
      powerMenu (record) {
        this.modal.selectData = record
        this.modal.bindMenu.visible = true
        this.getOpRoleMenuList()
      },
      // 显示应用角色菜单信息
      searchAllMenuTree () {
        // 查询应用所有菜单信息
        this.http.post('upmsApi', '/admin/opRole/getOpMenuTree').then((res) => {
          if (res.success) {
            let treeList = res.rows
            this.handleAppMenuTree(treeList)
            this.modal.bindMenu.allMenuTree = treeList
            this.getOpRoleMenuList()
            this.modal.bindMenu.visible = true
          }
        })
      },
      // 查询已经绑定的应用角色菜单信息
      getOpRoleMenuList () {
        this.modal.bindMenu.exMenuList = []
        if (this.modal.bindMenu.allMenuTree.length === 0) {
          this.searchAllMenuTree()
        }
        this.http.post('upmsApi', '/admin/opRole/getOpRoleMenuList', {
          opRoleId: this.modal.selectData.opRoleId
        }).then((res) => {
          if (res.success) {
            for (let i = 0; i < res.rows.length; i++) {
              this.modal.bindMenu.exMenuList.push(res.rows[i].menuId)
            }
          }
        })
      },
      handleAppMenuTree (treeList) {
        treeList.forEach(item => {
          item.title = item.menuName
          item.key = item.menuId
          if (item.children) {
            this.handleAppMenuTree(item.children)
          }
        })
      },
      // 绑定应用角色菜单
      bindRoleMenuOk () {
        this.http.post('upmsApi', '/admin/opRole/bindOpRoleMenu', {
          sourceIds: [this.modal.selectData.opRoleId],
          targetIds: this.modal.bindMenu.exMenuList
        }).then((res) => {
          if (res.success) {
            this.getOpRoleMenuList()
            this.modal.bindMenu.visible = false
          }
        })
      },
      powerAdmin (record) {
        this.modalAdmin.visible = true
        this.modalAdmin.allAdminList = []
        this.modalAdmin.rowSelection.selectedRowKeys = []
        this.modal.selectData = record
        this.selectPowerAdmin()
      },
      selectPowerAdmin () {
        this.http.post('upmsApi', '/admin/admin/getAdminList', {
          pageNum: this.modalAdmin.allPageObj.pageNum,
          pageSize: this.modalAdmin.allPageObj.pageSize,
          data: {}
        }).then((res) => {
          if (res.success) {
            let adminList = res.rows
            this.modalAdmin.allPageObj.total = res.total
            this.http.post('upmsApi', '/admin/opRole/getAdminListByOpRole', {
              pageSize: -1,
              data: {
                opRoleId: this.modal.selectData.opRoleId
              }
            }).then((res) => {
              if (res.success) {
                this.modalAdmin.selectAdminList = []
                adminList.forEach(item => {
                  item.power = false
                  res.rows.forEach(item2 => {
                    if (item.adminId === item2.adminId) {
                      item.power = true
                      this.modalAdmin.selectAdminList.push(item)
                    }
                  })
                })
                this.modalAdmin.allAdminList = adminList
                console.log(this.modalAdmin.allAdminList)
              }
            })
          }
        })
      },
      // 绑定
      bindAdminOk (record) {
        this.http.post('upmsApi', '/admin/opRole/bindOpRoleAdmin', {
          sourceIds: [this.modal.selectData.opRoleId],
          targetIds: [record.adminId]
        }).then((res) => {
          if (res.success) {
            this.$message.info(res.message)
            this.selectPowerAdmin()
          }
        })
      },
      // 解绑
      unBindAdminOk (record) {
        this.http.post('upmsApi', '/admin/opRole/unBindOpRoleAdmin', {
          opRoleId: this.modal.selectData.opRoleId,
          adminId: record.adminId
        }).then((res) => {
          if (res.success) {
            this.$message.info(res.message)
            this.selectPowerAdmin()
          }
        })
      }
    }
  }
</script>

<style scoped>

</style>
